<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传素材 - 图库共享</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <a href="index.html">
                            <span class="text-indigo-600 text-xl font-bold">图库共享</span>
                        </a>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</a>
                        <a href="explore.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">探索</a>
                        <a href="workspace.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">工作空间</a>
                        <a href="community.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">社区</a>
                    </div>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:items-center">
                    <!-- 搜索框 -->
                    <div class="relative">
                        <input type="text" placeholder="搜索素材..." class="bg-gray-100 rounded-full py-2 px-4 w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <button class="absolute right-0 top-0 mt-2 mr-3 text-gray-400">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    
                    <!-- 上传按钮 -->
                    <a href="upload.html" class="ml-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        上传素材
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-4 relative">
                        <button class="rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="py-8">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900">上传素材</h1>
                <p class="mt-2 text-gray-600">分享你的高质量图片，为社区做出贡献</p>
            </div>
            
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <!-- 上传区域 -->
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-indigo-500 transition-colors duration-300">
                    <div class="space-y-2">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i>
                        <h3 class="text-lg font-medium text-gray-900">拖放图片到这里</h3>
                        <p class="text-sm text-gray-500">支持 JPG, PNG, GIF 格式，单张图片最大 20MB</p>
                        <p class="text-xs text-gray-400">或</p>
                        <div>
                            <label for="file-upload" class="relative cursor-pointer bg-indigo-600 rounded-md font-medium text-white px-4 py-2 hover:bg-indigo-700 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                <span>选择文件</span>
                                <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple accept="image/*">
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- 上传预览 -->
                <div class="mt-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">上传预览</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <!-- 预览图片 1 -->
                        <div class="relative rounded-lg overflow-hidden group">
                            <img src="https://images.unsplash.com/photo-1579202673506-ca3ce28943ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
                                 alt="预览图片" 
                                 class="w-full h-32 object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                <button class="text-white rounded-full p-2 hover:bg-red-500 hover:bg-opacity-50">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
                                <span class="text-white text-xs">image1.jpg (2.4MB)</span>
                            </div>
                            <div class="absolute top-0 right-0 m-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已上传</span>
                            </div>
                        </div>
                        
                        <!-- 预览图片 2 -->
                        <div class="relative rounded-lg overflow-hidden group">
                            <img src="https://images.unsplash.com/photo-1525498128493-380d1990a112?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
                                 alt="预览图片" 
                                 class="w-full h-32 object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                <button class="text-white rounded-full p-2 hover:bg-red-500 hover:bg-opacity-50">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
                                <span class="text-white text-xs">image2.jpg (1.8MB)</span>
                            </div>
                            <div class="absolute top-0 right-0 m-2">
                                <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">上传中</span>
                            </div>
                        </div>
                        
                        <!-- 预览图片 3 -->
                        <div class="relative rounded-lg overflow-hidden">
                            <div class="w-full h-32 bg-gray-200 flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-exclamation-triangle text-yellow-500 text-lg"></i>
                                    <p class="text-xs text-gray-500 mt-1">文件过大</p>
                                </div>
                            </div>
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
                                <span class="text-white text-xs">image3.jpg (25MB)</span>
                            </div>
                            <div class="absolute top-0 right-0 m-2">
                                <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">错误</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 图片信息表单 -->
            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">素材信息</h3>
                <form>
                    <div class="space-y-6">
                        <!-- 标题 -->
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700">标题</label>
                            <div class="mt-1">
                                <input type="text" name="title" id="title" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="为您的素材添加一个标题">
                            </div>
                        </div>
                        
                        <!-- 描述 -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700">描述</label>
                            <div class="mt-1">
                                <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="详细描述这些素材..."></textarea>
                            </div>
                        </div>
                        
                        <!-- 标签 -->
                        <div>
                            <label for="tags" class="block text-sm font-medium text-gray-700">标签</label>
                            <div class="mt-1">
                                <input type="text" name="tags" id="tags" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="添加标签，用逗号分隔">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">添加相关标签帮助其他用户发现您的素材</p>
                        </div>
                        
                        <!-- 分类 -->
                        <div>
                            <label for="category" class="block text-sm font-medium text-gray-700">分类</label>
                            <div class="mt-1">
                                <select id="category" name="category" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="">选择分类</option>
                                    <option value="nature">自然风景</option>
                                    <option value="business">商务场景</option>
                                    <option value="architecture">建筑设计</option>
                                    <option value="technology">科技创新</option>
                                    <option value="food">美食料理</option>
                                    <option value="lifestyle">生活方式</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 版权信息 -->
                        <div>
                            <label for="license" class="block text-sm font-medium text-gray-700">版权许可</label>
                            <div class="relative mt-1">
                                <select id="license" name="license" class="block w-full rounded-lg border-gray-300 bg-white pl-3 pr-10 py-2.5 text-sm transition-all duration-200 hover:border-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 cursor-pointer appearance-none">
                                    <option value="all-rights">保留所有权利</option>
                                    <option value="cc-by">Creative Commons - 署名</option>
                                    <option value="cc-by-sa">Creative Commons - 署名-相同方式共享</option>
                                    <option value="cc-by-nc">Creative Commons - 署名-非商业性使用</option>
                                    <option value="public-domain">公共领域</option>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 隐私设置 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700">隐私设置</label>
                            <div class="mt-2 space-y-2">
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="public" name="privacy" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="public" class="font-medium text-gray-700">公开</label>
                                        <p class="text-gray-500">所有人都可以查看和下载</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="limited" name="privacy" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="limited" class="font-medium text-gray-700">限制访问</label>
                                        <p class="text-gray-500">仅限您和被授权的用户查看</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 添加到项目 -->
                        <div>
                            <label for="project" class="block text-sm font-medium text-gray-700">添加到项目</label>
                            <div class="mt-1">
                                <select id="project" name="project" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="">选择项目或不添加</option>
                                    <option value="1">夏季营销活动</option>
                                    <option value="2">品牌重塑计划</option>
                                    <option value="3">社交媒体内容</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 提交按钮 -->
                        <div class="flex justify-end space-x-3">
                            <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                保存为草稿
                            </button>
                            <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                发布素材
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">图库共享</h3>
                    <p class="text-gray-400">智能协同图片素材网，为创作者提供完美的协作平台。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white">首页</a></li>
                        <li><a href="explore.html" class="text-gray-400 hover:text-white">探索</a></li>
                        <li><a href="workspace.html" class="text-gray-400 hover:text-white">工作空间</a></li>
                        <li><a href="community.html" class="text-gray-400 hover:text-white">社区</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">公司简介</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">加入我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">帮助中心</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 pt-8 mt-12 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400">© 2023 图库共享. 保留所有权利</p>
                <div class="flex mt-4 md:mt-0 space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
                    <a href="#" class="text-gray-400 hover:text-white">使用条款</a>
                    <a href="#" class="text-gray-400 hover:text-white">Cookie 政策</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>